<template>
  <div id="content">
      <base-input-text 
        v-model="newTodoText"
        placeholder="New todo"
        @keydown.enter="addTodo"
      />
      <ul v-if="todos.length">
          <todo-list-item 
            v-for="todo in todos"
            :key="todo.id"
            :todo="todo"
            @remove="removeTodo"
          />
      </ul>
      <p v-else>
		Nothing left in the list. Add a new todo in the input above.
	  </p>
  </div>
</template>
<script>
import TodoListItem from "./TodoListItem";
import BaseInputText from "./BaseInputText";
let nextTodoId = 1;
export default {
  data() {
    return {
      newTodoText: "",
      todos: [{ id: nextTodoId++, text: "Learn Vue" }]
    };
  },
  components: {
    TodoListItem,
    BaseInputText
  },
  methods: {
    addTodo() {
      const trimmedText = this.newTodoText.trim();
      if (trimmedText) {
        this.todos.push({
          id: nextTodoId++,
          text: trimmedText
        });
        this.newTodoText = "";
      }
    },
    removeTodo(pl_idToRemove) {
      this.todos = this.todos.filter(function(todo) {
        //从todos移除指定id的列表对象
        return todo.id !== pl_idToRemove;
      });
    }
  }
};
</script>
<style lang="scss">
#content {
  padding: 5px 30px;
}
</style>

